<template>
    <div class="chart-container">
      <div ref="chartDom" class="liquid-chart"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
  import 'echarts-liquidfill' // 引入水球图插件
  
  const chartDom = ref(null)
  let chartInstance = null
  
  // 自定义字体大小
  const valueFontSize = 24 // 数值字体大小
  const labelFontSize = 12 // 下方文字字体大小
  
  const initChart = () => {
    if (!chartDom.value) return
  
    chartInstance = echarts.init(chartDom.value)
  
    const option = {
      series: [{
        type: 'liquidFill',
        radius: '90%',
        center: ['50%', '50%'],
        data: [0.65], // 当前值（65%）
        shape: 'circle',
        backgroundStyle: {
          borderWidth: 2,
          borderColor: '#4CAF50',
          color: 'rgba(255,255,255,0)' // 背景透明
        },
        itemStyle: {
          color: '#4CAF50'
        },
        label: {
          show: true,
          position: 'inside',
          formatter: () => {
            return `{value|65%}\n{desc|完成率}` // 使用 rich 定义两段文字
          },
          rich: {
            value: {
              fontSize: valueFontSize,
              fontWeight: 'bold',
              color: '#fff'
            },
            desc: {
              fontSize: labelFontSize,
              color: '#e0e0e0'
            }
          },
          textAlign: 'center'
        }
      }]
    }
  
    chartInstance.setOption(option)
  }
  
  const resizeHandler = () => {
    if (chartInstance) {
      chartInstance.resize()
    }
  }
  
  onMounted(() => {
    initChart()
    window.addEventListener('resize', resizeHandler)
  })
  </script>
  
  <style scoped>
  .chart-container {
    width: 100px;
    height: 100px;
    margin: 20px auto;
  }
  
  .liquid-chart {
    width: 100%;
    height: 100%;
  }
  </style>